{% extends 'kingadmin/base.html' %}

{% load admin_tags %}

{% block body %}
	<div id="container" class="effect mainnav-lg">
		
		<!--NAVBAR-->
		<!--===================================================-->
		<header id="navbar">
			<div id="navbar-container" class="boxed">

				<!--Brand logo & name-->
				<!--================================-->
				<div class="navbar-header">
					<a target="_blank" href="http://oldboyedu.com" class="navbar-brand">
						<img src="/static/img/logo.png" alt="Nifty Logo" class="brand-icon">
						<div class="brand-title">
							<span class="brand-text">KingAdmin</span>
						</div>
					</a>
				</div>
				<!--================================-->
				<!--End brand logo & name-->


				<!--Navbar Dropdown-->
				<!--================================-->
				<div class="navbar-content clearfix">
					<ul class="nav navbar-top-links pull-left">

						<!--Navigation toogle button-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li class="tgl-menu-btn">
							<a class="mainnav-toggle" href="#">
								<i class="fa fa-navicon fa-lg"></i>
							</a>
						</li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End Navigation toogle button-->


						<!--Messages Dropdown-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
{#                        #}
{#						<li class="dropdown">#}
{#							<a href="#" data-toggle="dropdown" class="dropdown-toggle">#}
{#								<i class="fa fa-envelope fa-lg"></i>#}
{#								<span class="badge badge-header badge-warning">9</span>#}
{#							</a>#}
{##}
{#							<!--Message dropdown menu-->#}
{#							<div class="dropdown-menu dropdown-menu-md with-arrow">#}
{#								<div class="pad-all bord-btm">#}
{#									<p class="text-lg text-muted text-thin mar-no">You have 3 messages.</p>#}
{#								</div>#}
{#								<div class="nano scrollable">#}
{#									<div class="nano-content">#}
{#										<ul class="head-list">#}
{#									#}
{#											<!-- Dropdown list-->#}
{#											<li>#}
{#												<a href="#" class="media">#}
{#													<div class="media-left">#}
{#														<img src="/static/img/av2.png" alt="Profile Picture" class="img-circle img-sm">#}
{#													</div>#}
{#													<div class="media-body">#}
{#														<div class="text-nowrap">Andy sent you a message</div>#}
{#														<small class="text-muted">15 minutes ago</small>#}
{#													</div>#}
{#												</a>#}
{#											</li>#}
{#									#}
{#											<!-- Dropdown list-->#}
{#											<li>#}
{#												<a href="#" class="media">#}
{#													<div class="media-left">#}
{#														<img src="/static/img/av4.png" alt="Profile Picture" class="img-circle img-sm">#}
{#													</div>#}
{#													<div class="media-body">#}
{#														<div class="text-nowrap">Lucy sent you a message</div>#}
{#														<small class="text-muted">30 minutes ago</small>#}
{#													</div>#}
{#												</a>#}
{#											</li>#}
{#										</ul>#}
{#									</div>#}
{#								</div>#}
{##}
{#								<!--Dropdown footer-->#}
{#								<div class="pad-all bord-top">#}
{#									<a href="#" class="btn-link text-dark box-block">#}
{#										<i class="fa fa-angle-right fa-lg pull-right"></i>Show All Messages#}
{#									</a>#}
{#								</div>#}
{#							</div>#}
{#						</li>#}
{#						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->#}
{#						<!--End message dropdown-->#}




{#						<!--Notification dropdown-->#}
{#						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->#}
{#						<li class="dropdown">#}
{#							<a href="#" data-toggle="dropdown" class="dropdown-toggle">#}
{#								<i class="fa fa-bell fa-lg"></i>#}
{#								<span class="badge badge-header badge-danger">5</span>#}
{#							</a>#}
{##}
{#							<!--Notification dropdown menu-->#}
{#							<div class="dropdown-menu dropdown-menu-md with-arrow">#}
{#								<div class="pad-all bord-btm">#}
{#									<p class="text-lg text-muted text-thin mar-no">You have 3 messages.</p>#}
{#								</div>#}
{#								<div class="nano scrollable">#}
{#									<div class="nano-content">#}
{#										<ul class="head-list">#}
{##}
{#											<!-- Dropdown list-->#}
{#											<li>#}
{#												<a href="#">#}
{#													<div class="clearfix">#}
{#														<p class="pull-left">Progressbar</p>#}
{#														<p class="pull-right">70%</p>#}
{#													</div>#}
{#													<div class="progress progress-sm">#}
{#														<div style="width: 70%;" class="progress-bar">#}
{#															<span class="sr-only">70% Complete</span>#}
{#														</div>#}
{#													</div>#}
{#												</a>#}
{#											</li>#}
{#									#}
{#											<!-- Dropdown list-->#}
{#											<li>#}
{#												<a href="#" class="media">#}
{#													<div class="media-left">#}
{#														<span class="icon-wrap icon-circle bg-primary">#}
{#															<i class="fa fa-comment fa-lg"></i>#}
{#														</span>#}
{#													</div>#}
{#													<div class="media-body">#}
{#														<div class="text-nowrap">Circle Icon</div>#}
{#														<small class="text-muted">15 minutes ago</small>#}
{#													</div>#}
{#												</a>#}
{#											</li>#}
{#									#}
{#											<!-- Dropdown list-->#}
{#											<li>#}
{#												<a href="#" class="media">#}
{#											<span class="badge badge-success pull-right">90%</span>#}
{#													<div class="media-left">#}
{#														<span class="icon-wrap icon-circle bg-danger">#}
{#															<i class="fa fa-hdd-o fa-lg"></i>#}
{#														</span>#}
{#													</div>#}
{#													<div class="media-body">#}
{#														<div class="text-nowrap">Circle icon with badge</div>#}
{#														<small class="text-muted">50 minutes ago</small>#}
{#													</div>#}
{#												</a>#}
{#											</li>#}
{#									#}
{#											<!-- Dropdown list-->#}
{#											<li>#}
{#												<a href="#" class="media">#}
{#													<div class="media-left">#}
{#														<span class="icon-wrap bg-info">#}
{#															<i class="fa fa-file-word-o fa-lg"></i>#}
{#														</span>#}
{#													</div>#}
{#													<div class="media-body">#}
{#														<div class="text-nowrap">Square Icon</div>#}
{#														<small class="text-muted">Last Update 8 hours ago</small>#}
{#													</div>#}
{#												</a>#}
{#											</li>#}
{#									#}
{#											<!-- Dropdown list-->#}
{#											<li>#}
{#												<a href="#" class="media">#}
{#											<span class="label label-danger pull-right">New</span>#}
{#													<div class="media-left">#}
{#														<span class="icon-wrap bg-purple">#}
{#															<i class="fa fa-comment fa-lg"></i>#}
{#														</span>#}
{#													</div>#}
{#													<div class="media-body">#}
{#														<div class="text-nowrap">Square icon with label</div>#}
{#														<small class="text-muted">Last Update 8 hours ago</small>#}
{#													</div>#}
{#												</a>#}
{#											</li>#}
{#										</ul>#}
{#									</div>#}
{#								</div>#}
{##}
{#								<!--Dropdown footer-->#}
{#								<div class="pad-all bord-top">#}
{#									<a href="#" class="btn-link text-dark box-block">#}
{#										<i class="fa fa-angle-right fa-lg pull-right"></i>Show All Notifications#}
{#									</a>#}
{#								</div>#}
{#							</div>#}
{#						</li>#}
{#						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->#}
{#						<!--End notifications dropdown-->#}



{#						<!--Mega dropdown-->#}
{#						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->#}
{#						<li class="mega-dropdown">#}
{#							<a href="#" class="mega-dropdown-toggle">#}
{#								<i class="fa fa-th-large fa-lg"></i>#}
{#							</a>#}
{#							<div class="dropdown-menu mega-dropdown-menu">#}
{#								<div class="clearfix">#}
{#									<div class="col-sm-12 col-md-3">#}
{##}
{#										<!--Mega menu widget-->#}
{#										<div class="text-center bg-purple pad-all">#}
{#											<h3 class="text-thin mar-no">Weekend shopping</h3>#}
{#											<div class="pad-ver box-inline">#}
{#												<span class="icon-wrap icon-wrap-lg icon-circle bg-trans-light">#}
{#													<i class="fa fa-shopping-cart fa-4x"></i>#}
{#												</span>#}
{#											</div>#}
{#											<p class="pad-btm">#}
{#												Members get <span class="text-lg text-bold">50%</span> more points. Lorem ipsum dolor sit amet!#}
{#											</p>#}
{#											<a href="#" class="btn btn-purple">Learn More...</a>#}
{#										</div>#}
{##}
{#									</div>#}
{#									<div class="col-sm-4 col-md-3">#}
{##}
{#										<!--Mega menu list-->#}
{#										<ul class="list-unstyled">#}
{#											<li class="dropdown-header">Pages</li>#}
{#											<li><a href="#">Profile</a></li>#}
{#											<li><a href="#">Search Result</a></li>#}
{#											<li><a href="#">FAQ</a></li>#}
{#											<li><a href="#">Sreen Lock</a></li>#}
{#											<li><a href="#" class="disabled">Disabled</a></li>#}
{#											<li class="divider"></li>#}
{#											<li class="dropdown-header">Icons</li>#}
{#											<li><a href="#"><span class="pull-right badge badge-purple">479</span> Font Awesome</a></li>#}
{#											<li><a href="#">Skycons</a></li>#}
{#										</ul>#}
{##}
{#									</div>#}
{#									<div class="col-sm-4 col-md-3">#}
{##}
{#										<!--Mega menu list-->#}
{#										<ul class="list-unstyled">#}
{#											<li class="dropdown-header">Mailbox</li>#}
{#											<li><a href="#"><span class="pull-right label label-danger">Hot</span>Indox</a></li>#}
{#											<li><a href="#">Read Message</a></li>#}
{#											<li><a href="#">Compose</a></li>#}
{#											<li class="divider"></li>#}
{#											<li class="dropdown-header">Featured</li>#}
{#											<li><a href="#">Smart navigation</a></li>#}
{#											<li><a href="#"><span class="pull-right badge badge-success">6</span>Exclusive plugins</a></li>#}
{#											<li><a href="#">Lot of themes</a></li>#}
{#											<li><a href="#">Transition effects</a></li>#}
{#										</ul>#}
{##}
{#									</div>#}
{#									<div class="col-sm-4 col-md-3">#}
{##}
{#										<!--Mega menu list-->#}
{#										<ul class="list-unstyled">#}
{#											<li class="dropdown-header">Components</li>#}
{#											<li><a href="#">Tables</a></li>#}
{#											<li><a href="#">Charts</a></li>#}
{#											<li><a href="#">Forms</a></li>#}
{#											<li class="divider"></li>#}
{#											<li>#}
{#												<form role="form" class="form">#}
{#													<div class="form-group">#}
{#														<label class="dropdown-header" for="demo-megamenu-input">Newsletter</label>#}
{#														<input id="demo-megamenu-input" type="email" placeholder="Enter email" class="form-control">#}
{#													</div>#}
{#													<button class="btn btn-primary btn-block" type="submit">Submit</button>#}
{#												</form>#}
{#											</li>#}
{#										</ul>#}
{#									</div>#}
{#								</div>#}
{#							</div>#}
{#						</li>#}
{#						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->#}
{#						<!--End mega dropdown-->#}

					</ul>
					<ul class="nav navbar-top-links pull-right">


						<!--User dropdown-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li id="dropdown-user" class="dropdown">
							<a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
								<span class="pull-right">
									<img class="img-circle img-user media-object" src="/static/img/av1.png" alt="Profile Picture">
								</span>
								<div class="username hidden-xs">{{ request.user.name }}</div>
							</a>


							<div class="dropdown-menu dropdown-menu-md dropdown-menu-right with-arrow panel-default">

								<!-- Dropdown heading  -->
{#								<div class="pad-all bord-btm">#}
{#									<p class="text-lg text-muted text-thin mar-btm">750Gb of 1,000Gb Used</p>#}
{#									<div class="progress progress-sm">#}
{#										<div class="progress-bar" style="width: 70%;">#}
{#											<span class="sr-only">70%</span>#}
{#										</div>#}
{#									</div>#}
{#								</div>#}


								<!-- User dropdown menu -->
								<ul class="head-list">
									<li>
										<a href="{% url 'personal_password_reset'  %}">
											<i class="fa fa-user fa-fw fa-lg"></i> Change Password
										</a>
									</li>
{#									<li>#}
{#										<a href="#">#}
{#											<span class="badge badge-danger pull-right">9</span>#}
{#											<i class="fa fa-envelope fa-fw fa-lg"></i> Messages#}
{#										</a>#}
{#									</li>#}
{#									<li>#}
{#										<a href="#">#}
{#											<span class="label label-success pull-right">New</span>#}
{#											<i class="fa fa-gear fa-fw fa-lg"></i> Settings#}
{#										</a>#}
{#									</li>#}
								</ul>

								<!-- Dropdown footer -->
								<div class="pad-all text-right">
									<a href="{% url 'acc_logout' %}" class="btn btn-primary">
										<i class="fa fa-sign-out fa-fw"></i> Logout
									</a>
								</div>
							</div>
						</li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End user dropdown-->

					</ul>
				</div>
				<!--================================-->
				<!--End Navbar Dropdown-->

			</div>
		</header>
		<!--===================================================-->
		<!--END NAVBAR-->

		<div class="boxed">

			<!--CONTENT CONTAINER-->
			<!--===================================================-->
			<div id="content-container">
				
				<!--Page Title-->
				<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
				<div id="page-title">
                    {% block page-title %}
					<h1 class="page-header text-overflow">{% block page-title-text %}你的页面标题{% endblock %}</h1>

					<!--Searchbox-->
                    {% block searchbox %}
{#                        <div class="searchbox">#}
{#                            <div class="input-group custom-search-form">#}
{#                                <input type="text" class="form-control" placeholder="Search..">#}
{#                                <span class="input-group-btn">#}
{#                                    <button class="text-muted" type="button"><i class="fa fa-search"></i></button>#}
{#                                </span>#}
{#                            </div>#}
{#                        </div>#}
                    {% endblock %}
                    {% endblock %}
				</div>
				<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
				<!--End page title-->


				<!--Breadcrumb-->
                {% block breadcrumb %}
				<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
				<ol class="breadcrumb">
					<li><a href="#">Home</a></li>
					<li><a href="#">Library</a></li>
					<li class="active">Data</li>
				</ol>
                {% endblock %}
				<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
				<!--End breadcrumb-->


		

				<!--Page content-->
				<!--===================================================-->
				<div id="page-content">
					{% block page-content %}
					
					<!-- QUICK TIPS -->
					<!-- ==================================================================== -->
					<h3>Your content here...</h3>
					<br>
					<a href="index.html" class="btn btn-dark">Back</a>
					<br><br><br>
					<h3>Quick Tips</h3>
					<p>You may remove all ID or Class names which contain <code>demo-</code>, they are only used for demonstration.</p>
					<br>
					
					<h4>Navigation</h4>
					<div class="table-responsive">
						<table class="table">
							<tbody>
								<tr>
									<td style="width:70ex">Expanded the navigation by default</td>
									<td>Add <code>.mainnav-lg</code> to the <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Fixed navigation</td>
									<td>Add <code>.mainnav-fixed</code> to the <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Create a ToggleButton for navigation</td>
									<td>Add <code>.mainnav-toggle</code> to the button.</td>
								</tr>
								<tr>
									<td></td>
									<td>
										<button class="btn btn-lg btn-primary mainnav-toggle">Toggle Navigation</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					
					<h4>Aside</h4>
					<div class="table-responsive">
						<table class="table">
							<tbody>
								<tr>
									<td style="width:70ex">Make Aside visible by default</td>
									<td>Add <code>.aside-in</code> to the <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Fixed aside</td>
									<td>Add <code>.aside-fixed</code> to the <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Aside on the left side</td>
									<td>Add <code>.aside-left</code> to the <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Use the bright color theme</td>
									<td>Add <code>.aside-bright</code> to the <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Create a ToggleButton for aside</td>
									<td>Add <code>.aside-toggle</code> to the button.</td>
								</tr>
								<tr>
									<td></td>
									<td>
										<button class="btn btn-success btn-lg aside-toggle">Toggle Aside</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h4>Navbar</h4>
					<div class="table-responsive">
						<table class="table">
							<tbody>
								<tr>
									<td style="width:70ex">Fixed navbar</td>
									<td>Add <code>.navbar-fixed</code> to the <code>#container</code>.</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h4>Footer</h4>
					<div class="table-responsive">
						<table class="table">
							<tbody>
								<tr>
									<td style="width:70ex">Fixed footer</td>
									<td>Add <code>.footer-fixed</code> to the <code>#container</code>.</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h4>Color Themes</h4>
					<div class="table-responsive">
						<table class="table">
							<tbody>
								<tr>
									<td style="width:70ex">Apply a different color theme</td>
									<td>You can change whole color theme of your website by adding a color theme stylesheet into the <code>&lt;head></code>.</td>
								</tr>
								<tr>
									<td></td>
									<td><pre>&lt;head><br>	...<br>	&lt;link href="path-to-the-color-theme.css" rel="stylesheet"><br>&lt;/head></pre></td>
								</tr>
							</tbody>
						</table>
					</div>
					<h4>Animation</h4>
					<div class="table-responsive">
						<table class="table">
							<tbody>
								<tr>
									<td style="width:70ex">Remove animation</td>
									<td>Remove the class <code>.effect</code> from <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Add different slide transitions to the Navigation and Aside</td>
									<td>
										Add <code>.effect</code> to the <code>#container</code> and then combined with the class name of the transition function.
										<br>
										<br>
										<table>
											<thead>
												<tr>
													<th style="width: 250px;">Transition function</th>
													<th>Class name</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>easeInQuart</td>
													<td><code>.easeInQuart</code></td>
												</tr>
												<tr>
													<td>easeOutQuart</td>
													<td><code>.easeOutQuart</code></td>
												</tr>
												<tr>
													<td>easeInBack</td>
													<td><code>.easeInBack</code></td>
												</tr>
												<tr>
													<td>easeOutBack</td>
													<td><code>.easeOutBack</code></td>
												</tr>
												<tr>
													<td>easeInOutBack</td>
													<td><code>.easeInOutBack</code></td>
												</tr>
												<tr>
													<td>steps</td>
													<td><code>.steps</code></td>
												</tr>
												<tr>
													<td>jumping</td>
													<td><code>.jumping</code></td>
												</tr>
												<tr>
													<td>rubber</td>
													<td><code>.rubber</code></td>
												</tr>
											</tbody>
										</table>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<!-- ==================================================================== -->
					<!-- END QUICK TIPS -->
					
					
				    {% endblock %}
				</div>
				<!--===================================================-->
				<!--End page content-->


			</div>
			<!--===================================================-->
			<!--END CONTENT CONTAINER-->


			
			<!--MAIN NAVIGATION-->
			<!--===================================================-->
			{% block mainnav-container %}
            <nav id="mainnav-container">
				<div id="mainnav">

					<!--Shortcut buttons-->
					<!--
					<div id="mainnav-shortcut">
						<ul class="list-unstyled">
							<li class="col-xs-4" data-content="Shortcut 1">
								<a class="shortcut-grid" href="#">
									<i class="fa fa-car"></i>
								</a>
							</li>
							<li class="col-xs-4" data-content="Shortcut 2">
								<a class="shortcut-grid" href="#">
									<i class="fa fa-taxi"></i>
								</a>
							</li>
							<li class="col-xs-4" data-content="Shortcut 3">
								<a class="shortcut-grid" href="#">
									<i class="fa fa-bus"></i>
								</a>
							</li>
						</ul>
					</div>
					-->
					<!--End shortcut buttons-->


					<!--Menu-->
					<!--================================-->
					<div id="mainnav-menu-wrap">
						<div class="nano">

							<div class="nano-content">
                                {% block left-side-menu %}
								<ul id="mainnav-menu" class="list-group">

                                    {% for app_name,admin_class_dic in enabled_admins.items %}
                                    <li >
                                        <a href="{% url 'app_tables' app_name %}">
                                            <i class="fa fa-play-circle"></i>
                                            <span class="menu-title">{{ app_name }}</span>
                                        </a>
                                    </li>
                                    {% endfor %}
{#									<!--Category name-->#}
{#									<li class="list-header">Link List</li>#}
{##}
{#                                    {% load_menus request  as menus %}#}
{#                                    {% for m in menus %}#}
{#                                        {% if not m.sub_menus.select_related %}#}
{#                                            <li >#}
{##}
{#                                                <a href="{% if m.url_type == 0 %}{% url m.url_name %}{% else %}{{ m.url_name }}{% endif %}">#}
{#                                                    <i class="fa fa-plane"></i>#}
{#                                                    <span class="menu-title">{{ m.name }}</span>#}
{#                                                </a>#}
{#                                            </li>#}
{#                                        {% else %}#}
{#                                            <li class="">#}
{#                                                <a href="{% url m.url_name %}">#}
{#                                                    <i class="fa fa-th"></i>#}
{#                                                    <span class="menu-title">{{ m.name }}</span>#}
{#                                                    <i class="arrow"></i>#}
{#                                                </a>#}
{##}
{#                                                <!--Submenu-->#}
{#                                                <ul class="collapse">#}
{#                                                    {% for sub_menu in m.sub_menus.select_related %}#}
{#                                                        <li><a href="{% if sub_menu.url_type == 0 %}{% url  sub_menu.url_name  %}{% else %}{{ sub_menu.url_name }}{% endif %}">{{ sub_menu.name }}</a></li>#}
{#                                                    {% endfor %}#}
{##}
{#                                                </ul>#}
{#                                            </li>#}
{#                                        {% endif %}#}
{#                                    {% endfor %}#}
{#									<!--Menu list item-->#}



								</ul>


                                {% endblock %}
							</div>

						</div>
					</div>
					<!--================================-->
					<!--End menu-->

				</div>
			</nav>
			<!--===================================================-->
			<!--END MAIN NAVIGATION-->
			{% endblock %}
			<!--ASIDE-->
			<!--===================================================-->
			<aside id="aside-container">
				<div id="aside">
					<div class="nano">
						<div class="nano-content">
							
							<!--Nav tabs-->
							<!--================================-->
							<ul class="nav nav-tabs nav-justified">
								<li class="active">
									<a href="#demo-asd-tab-1" data-toggle="tab">
										<i class="fa fa-comments"></i>
										<span class="badge badge-purple">7</span>
									</a>
								</li>
								<li>
									<a href="#demo-asd-tab-2" data-toggle="tab">
										<i class="fa fa-info-circle"></i>
									</a>
								</li>
								<li>
									<a href="#demo-asd-tab-3" data-toggle="tab">
										<i class="fa fa-wrench"></i>
									</a>
								</li>
								<li>
									<a href="#demo-asd-tab-4" data-toggle="tab">
										<i class="fa fa-shield"></i>
										<span class="label label-success">New</span>
									</a>
								</li>
							</ul>
							<!--================================-->
							<!--End nav tabs-->



							<!-- Tabs Content -->
							<!--================================-->
							<div class="tab-content">

								<!--First tab-->
								<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
								<div class="tab-pane fade in active" id="demo-asd-tab-1">
									<h4 class="pad-hor text-thin">
										First tab
									</h4>
									<div class="pad-all">

									Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
									sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
									Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
									ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
									velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
									et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

									</div>

								</div>
								<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
								<!--End first tab-->


								<!--Second tab-->
								<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
								<div class="tab-pane fade" id="demo-asd-tab-2">
									<h4 class="pad-hor text-thin">
										Second tab
									</h4>
									<div class="pad-all">

									Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
									sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
									Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
									ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
									velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
									et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

									</div>
								</div>
								<!--End second tab-->
								<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->


								<!--Third tab-->
								<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
								<div class="tab-pane fade" id="demo-asd-tab-3">
									<h4 class="pad-hor text-thin">
										Third tab
									</h4>
									<div class="pad-all">

									Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
									sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
									Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
									ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
									velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
									et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

									</div>

								</div>
								<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
								<!--Third tab-->

								<!--Fourth tab-->
								<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
								<div class="tab-pane fade" id="demo-asd-tab-4">
									<h4 class="pad-hor text-thin">
										Fourth tab
									</h4>
									<div class="pad-all">

									Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
									sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
									Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
									ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
									velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
									et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

									</div>

								</div>
								<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
								<!--Third tab (Settings)-->

							</div>
						</div>
					</div>
				</div>
			</aside>
			<!--===================================================-->
			<!--END ASIDE-->

		</div>

		

        <!-- FOOTER -->
        <!--===================================================-->
        <footer id="footer">

            <!-- Visible when footer positions are fixed -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <div class="show-fixed pull-right">
                <ul class="footer-list list-inline">
                    <li>
                        <p class="text-sm">SEO Proggres</p>
                        <div class="progress progress-sm progress-light-base">
                            <div style="width: 80%" class="progress-bar progress-bar-danger"></div>
                        </div>
                    </li>

                    <li>
                        <p class="text-sm">Online Tutorial</p>
                        <div class="progress progress-sm progress-light-base">
                            <div style="width: 80%" class="progress-bar progress-bar-primary"></div>
                        </div>
                    </li>
                    <li>
                        <button class="btn btn-sm btn-dark btn-active-success">Checkout</button>
                    </li>
                </ul>
            </div>



            <!-- Visible when footer positions are static -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <div class="hide-fixed pull-right pad-rgt">Currently beta v1.0</div>



            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <!-- Remove the class name "show-fixed" and "hide-fixed" to make the content always appears. -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

            <p class="pad-lft">&#0169; 2017 Proudly Powered By 老男孩IT教育</p>



        </footer>
        <!--===================================================-->
        <!-- END FOOTER -->


        <!-- SCROLL TOP BUTTON -->
        <!--===================================================-->
        <button id="scroll-top" class="btn"><i class="fa fa-chevron-up"></i></button>
        <!--===================================================-->



	</div>
	<!--===================================================-->
	<!-- END OF CONTAINER -->


	
{% endblock %}

{% block bottom-js %}

    <script src="/static/kingadmin/js/kingadmin/king_admin.js" > </script>

{% endblock %}